<template>
  <div class="app-cont">
    <!--这是 Header 区域 -->
    <!--<div class="header">-->
    <!--<headers title="店铺"></headers>-->
    <!--</div>-->
    <div class="main">
      <div class="main-container">
        <div class="fenlei">
          <div class="homeTop">
            <div class="homt-content">
              <div class="left">
                <img :src="shopImgUrl" alt="">
                <div class="right">
                  <span class="shopName">{{shopInfo.shopName}}</span>
                  <span>已拼单：{{spellCount}}件</span>
                </div>
              </div>
              <div class="right">
                <a href="javascript:;" class="share share-one" @click="setting">
                  <div class="share-icon"></div>
                </a>
                <a href="javascript:;" class="share" @click="invite">
                  <div class="share-icon"></div>
                </a>
              </div>
            </div>
          </div>
          <div class="nav">
            <ul>
              <li @click="allS()">
                <a href="javascript:;" @click="curId=0" :class="{'cur':curId===0}">全部</a>
              </li>
              <li @click="price()">
                <a href="javascript:;" @click="curId=1" :class="{'cur':curId===1}">
                  价格
                  <i class="up" @click="priceUp"></i>
                  <i class="down" @click="priceDown"></i>
                </a>
              </li>
              <li @click="category">
                <a href="javascript:;" @click="curId=2" :class="{'cur':curId===2}">类别</a>
              </li>
              <li @click="brand()">
                <a href="javascript:;" @click="curId=3" :class="{'cur':curId===3}">品牌</a>
              </li>
            </ul>
          </div>
          <div class="allSort">

            <div class="allGoods">
              <!--<v-loadmore :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore">
                <ul class="list">
                  <li class="item" v-for="(good ,index) in pindanList" :key=index >
                    <div class="top" @click="goDetail(good.mallVo.id)">
                      <div class="pic left"><img :src=good.mallVo.mallImg  alt=""></div>
                      <div class="right">
                        <span class="goodsName">{{good.mallVo.mallName}}</span>
                        <p class="goodsPrice">
                          <span class="gray">已进货： {{good.mallVo.stock}}件</span>
                        </p>
                        <p class="red">&yen {{good.mallVo.salePrice/100}}</p>
                        <p>
                          <span class="jdp">京东价: {{good.mallVo.jdPrice}}</span>
                        </p>
                      </div>
                    </div>
                    <div class="bottom">
                      <div class="bottom-left">
                        <p class="goodsTime">还差{{good.numPerson}}件，剩余 <Countdown :gpEndTime="Date.parse(new Date(good.timeEnd)).toString()"></Countdown></p>
                      </div>
                      <div class="more">
                        <a href="javascript:;" @click="updateCount(index)">
                          更多
                        </a>
                        <button class="btn2" @click="pinDan()" value="邀请拼单">邀请拼单</button>

                        <div class="operation_order" v-show="curId===index?isShow:false">
                          <p class="cancel">取消订单</p>
                          <p class="delete" @click="del(index)">删除订单</p>
                        </div>


                      </div>
                    </div>
                  </li>
                </ul>
              </v-loadmore>-->
              <div class="main-body" :style="{'-webkit-overflow-scrolling': scrollMode}">
                <mt-loadmore :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" :auto-fill="false"
                             ref="loadmore">
                  <LoadMore :pindanList="pindanList" :creator="shopInfo.realName"></LoadMore>
                </mt-loadmore>
              </div>
              <p class="goodsNone">—已到最底部—</p>
            </div>
          </div>
          <!--遮罩层-->
          <div class="zhezhao" v-if='zhezhao1' @click="zzceng1()">
            <div class="wenzi">
              <span class="wenzi">
              长按图片，点击"发送给好友"<br>
              扫码即刻关注您的店铺
            </span>
            </div>
            <div class="zzc1_content" v-if="zzc1">
              <div class="content">
                <img :src="shopImgUrl" alt="" class="content-img">
                <p>{{shopInfo.shopName}}</p>
                <p>更多优惠,等你来拼!</p>
                <canvas class="tupian" id="canvas">
                  <!--<img id="canvas" src="./../assets/images/shops/erweima.png" alt="">-->
                </canvas>
                <p>记得邀请好友参与，拼单更快哦！</p>
              </div>
            </div>
            <div class="zzc2_content" v-if="zzc2">
              <div class="zzc2_top">
                <img src="../assets/images/ico@1x.png" alt="">
                <span>分享成功</span>
              </div>
              <div class="zzc2_sec">
                <p>分享越多，拼单成功率越好哦！</p>
                <button class="zzc2_btn1">继续分享</button>
                <div>
                  <img src="../assets/images/line@1x.png" alt="">
                  <span>好货提示</span>
                </div>
                <p>查看更多好货，获得更多优惠</p>
                <button class="zzc2_btn2">回到首页</button>
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>
    <!-- 底部的 Tabbar 区域 -->
    <div class="footer">
      <mt-tabbar class="tabbar">
        <mt-tab-item id="tab1">
          <img slot="icon" src="./../assets/images/ico_home_1@1x.png" @click="disTrueHome">
          首页
        </mt-tab-item>
        <mt-tab-item id="tab2">
          <img slot="icon" src="./../assets/images/ico_fenlei_1@1x.png" @click="toMemberContainer">
          分类
        </mt-tab-item>
        <mt-tab-item id="tab3" class="shopNow">
          <img slot="icon" src="./../assets/images/ico_dianpu_2@1x.png" @click="toShops">
          店铺
        </mt-tab-item>
        <mt-tab-item id="tab4">
          <img slot="icon" src="./../assets/images/ico_wode_1@1x.png" @click="tomyHomeFX">
          我的
        </mt-tab-item>
      </mt-tabbar>
    </div>
    <loading v-show="showLoading "></loading>
    <alertTip v-if="showAlert" @closeTip="go()" :alertText="alertText"></alertTip>

  </div>

</template>

<script>
  /* eslint-disable semi */
  //  import {Loadmore} from 'mint-ui';
  //  import loadmore from '../components/LoadMore'
  import Vue from 'vue'
  import QRCode from 'qrcode'
  import wx from 'weixin-js-sdk'
  import { wxHttpTool,wx_config, http_getParam, get_shopQrcoe,wx_share,wx_hideAllMenu,get_userInfo,get_shopInfo} from '../components/httpUtil/httpUtil'
  import {msg_10046} from '../message/msg_10046'
  import { relogin } from "../components/httpUtil/httpUtil";
  Vue.use(QRCode)
  export default {
    name: 'Shops',
    data () {
      return {
        curId: 0,
        title: '',
        isShow: false,
        showLoading: true, //显示加载动画
        //分页属性
        startIndex: 0,
        allLoaded: false, //是否可以上拉属性，false可以上拉，true为禁止上拉，就是不让往上划加载数据了
        scrollMode: "auto", //移动端弹性滚动效果，touch为弹性滚动，auto是非弹性滚动
        zhezhao1: false,
        zzc1: false,
        zzc2: false,
        shopName: '',
        shopId: '',
        codes: '',
        shopInfo: {},
        shopImgUrl: '',
        spellCount: 0,
        pindanList: [],
        userInfo: {},
        Msg: '',
        showAlert: false,
        alertText: null,
        wxlist: {}
      }
    },
    methods: {
      alertTip(msg){
        this.showAlert = true;
        this.alertText = msg;
      },
      go(){
        this.showAlert = false
      },
      // 隐藏动画
      hideLoading(){
        this.showLoading = false;
      },
//      生成二维码
      useqrcode(){
//        const shopStr = window.location.search;
        let shopUrl = get_shopQrcoe(this.shopInfo.id, 1)//this.shopInfo.shopUrl;
//        const shopStr = this.shopInfo.shopUrl.split('?')[1].split('&');
//        console.log(shopStr)
        console.log(shopUrl)
        let canvas = document.getElementById('canvas')
        let canvs = QRCode.toCanvas(canvas, shopUrl, function (error) {
          if (error) console.error(error)
          console.log('success!');
        })
      },
      //点击事件
//      updateCount: function (index) {
//        if(this.curId === index){
//          this.isShow= !this.isShow
//        }else {
//          this.curId = index;
//        }
//      },
      // 请求 店铺信息 数据 10018
      fn10020 (startIndex) {

        let jsonValue = JSON.stringify(
          {
            'c': '10020',
            'p': {
              'userId': JSON.parse(window.localStorage.data).id,
              'tokenId': token(),
              'shopId': JSON.parse(window.localStorage.shopId), // 店铺ID
              //'shopId': 48,
              'pageSize': 10,
              'startIndex': startIndex ? startIndex : 0  // 开始位置
            }
          }
        )
        this.$http.post(api + '/qqs.us', jsonValue).then((res) => {
          console.log(res)
          if (res.data.p.isTrue) {
            this.hideLoading();
            this.shopInfo = res.data.p.shop;
            JSON.parse(window.localStorage.loginP).shop = res.data.p.shop;
            console.log(JSON.parse(window.localStorage.loginP))
            this.shopImgUrl = res.data.p.shopImgUrl;
            this.spellCount = res.data.p.spellCount;
            const shopName=res.data.p.shop.shopName
            const shopUrl=get_shopQrcoe(this.shopInfo.id, 1)
            wx_share(shopName, shopUrl, get_userInfo('headImg'), get_shopInfo('description'));
            this.pindanList = this.pindanList.concat(res.data.p.mallList);
            this.$nextTick(function () {
              this.scrollMode = "touch";
            });
          } else {
            this.hideLoading();
            this.Msg = res.data.p.errorMsg
            this.alertTip(this.Msg);

            if (res.data.p.errorCode === 90) {
              this.go = () => {
                this.showAlert = false
                let _this = this;
                relogin(_this)
              }
            }

            // alert(this.Msg)
          }
        })
      },
      loadBottom: function () {
        // 上拉加载
        this.startIndex += 1;
        this.fn10020(this.startIndex)
        this.$refs.loadmore.onBottomLoaded();// 固定方法，查询完要调用一次，用于重新定位
      },
      /*      fn10010(startIndex){
       const  jsonValue = JSON.stringify({
       "c":"10010",
       "p":{
       "userId":1009, //用户ID
       "startIndex":startIndex?startIndex:0, // 开始位置
       "pageSize":10,   // 分页总数量
       "tokenId":token(),
       "state":2
       }
       });
       this.$http.post(api+'/qqs.us', jsonValue).then((res) => {
       console.log(res)
       if(startIndex==undefined){
       this.pindanList = [];
       }
       this.pindanList = this.pindanList.concat(res.data.p.goods)
       // this.$nextTick(function () {
       //   this.scrollMode = "touch";
       // });
       })
       },
       //上拉加载
       loadBottom:function() {
       // 上拉加载
       this.more();// 上拉触发的分页查询
       this.$refs.loadmore.onBottomLoaded();// 固定方法，查询完要调用一次，用于重新定位
       },
       more:function (){
       // 分页查询
       this.startIndex += 1;
       this.fn10010(this.startIndex)
       },*/

      // 指定排序的比较函数
      compareUp (property) {
        return function (obj1, obj2) {
          let value1 = obj1[property];
          let value2 = obj2[property];
          return value1 - value2    // 升序
        }
      },
      compareDown (property) {
        return function (obj1, obj2) {
          let value1 = obj1[property];
          let value2 = obj2[property];
          return value2 - value1   // 升序
        }
      },
      // 价格排序
      priceUp () {
        this.pindanList.sort(this.compareUp('salePrice'))
      },
      priceDown () {
        this.goods.sort(this.compareDown('money'))
      },
      price () {},
      allS () {},
      typeS () {},
      brand () {},
      // 类别排序
      category () {
        this.isClick = !this.isClick;
        if (this.isClick) {
          this.goods.sort(this.compareUp('goodsType1'))
        } else {
          this.goods.sort(this.compareDown('goodsType1'))
        }
      },
//      pinDan () {
//        this.$router.push({name:'pinDanDetails'})
//      },
      invite () {
//        alert('邀请好友');
        this.zhezhao1 = true
        this.zzc1 = true
        this.zzc2 = false
//        this.useqrcode()
        console.log(1)
      },
      zzceng1 () { // 点击遮罩层关闭
        this.zhezhao1 = false
        this.zzc1 = false
        this.zzc2 = false;

      },
      disTrueHome () {

        this.$router.push({name: 'disTrueHome'})
      },
      toMemberContainer () {

        this.$router.push({name: 'MemberContainer'})
      },
      toShops() {
        console.log(JSON.parse(window.localStorage.loginP).hasOwnProperty('shop'));
        if (JSON.parse(window.localStorage.loginP).hasOwnProperty('shop')) {
          localStorage.setItem('shopId', JSON.parse(window.localStorage.loginP).shop.id);
          this.$router.push({name: 'Shops'})
        } else {
          this.$router.push({name: 'NewShop'});
        }
      },
      tomyHomeFX () {
        this.$router.push({name: 'myHomeFX'})
      },
      setting () {
        this.userInformation = JSON.parse(window.localStorage.data)
        this.$router.push({
          name: 'XGShops',
          params: {
            userId: JSON.parse(window.localStorage.data).id,
            shopInfo: this.shopInfo
          }
        })
        console.log('进入修改商铺')

      },
    },

    mounted () {
      wxHttpTool.wxAuthor(this, function (varRet, varJson, varThis = this) {
        if (varRet == -1) {
          varThis.alertTip('网络错误');
          varThis.go = function () {
            varThis.showAlert = false;
          }

        }
        // 关注钱应该判断下是否已经关注过了
        varThis.fn10020();
        msg_10046.send(varThis,msg_10046.entity(),function(varThis,res){
          varThis.hideLoading();
          /* const malltitle=this.goodsInfo.mallName
           const mallurl=window.location.href
           const mallimg=this.goodsInfo.mallImg
           const mallrice=this.goodsInfo.salePrice / 100
           wx_share(malltitle,mallurl,mallimg,mallrice)*/
          wx_hideAllMenu();
          wx.hideMenuItems({
            //禁用单独分享朋友圈QQ空间等功能
            menuList: ["menuItem:share:timeline","menuItem:share:QZone","menuItem:share:qq"] // 要隐藏的菜单项，所有menu项见附录3
          });
        })


      },1)




      // const jsonValue = JSON.stringify({
      //   "c": "10046",
      //   "p": {
      //     "userId":varUserInfo.id,
      //     "tokenId":token()
      //   }
      // })
      // this.$http.post(api+'/qqs.us', jsonValue)
      //   .then((res) => {
      //     console.log(res);
      //     this.wxlist=res.data.p.sign
      //     this.hideLoading();
      //     wx_config(this.wxlist);
      //     wx_share();

      //   })
      //this.fn10010();
    },
    updated (){
      this.useqrcode();
    }

  }
</script>

<style lang="scss" scoped>
  .cur {
    color: #f00;
  }

  .app-cont {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 00px 0 94px;
    box-sizing: border-box;
    ::-webkit-scrollbar {
      display: none;
    }
    .header {
      position: fixed;
      z-index: 99;
      top: 0;
      left: 0;
      /*flex: 1;*/
      width: 100%;
      height: 80px;
    }
    .main {
      flex: 1;
      position: relative;
      .main-container {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        overflow: hidden;
      }
    }
    .footer {
      position: fixed;
      bottom: 0;
      left: 0;
      height: 92px;
      width: 100%;
    }
  }

  .app-cont {
    .tabbar {
      position: fixed;
      /*flex: 1;*/
      box-sizing: border-box;
      height: 94px;
      border-top: 1px solid #f3f3f3;
      color: #898d93;
    }
  }

  .fenlei {
    width: 100%;
    height: 100%;
    overflow: hidden;
    overflow-y: auto;
    background-color: #f4f4f4;
    display: flex;
    flex-direction: column;
    ::-webkit-scrollbar {
      display: none;
    }
  }

  /*立即参团遮罩层*/
  .zhezhao {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 20000;
    position: fixed;
    top: 0px;
  }

  .zhezhao .zzc1_content, .zzc2_content {
    width: 500px;
    height: 240px;
    background: #fff;
    position: absolute;
    top: 260px;
    /*right: 78px;*/
    left: 50%;
    transform: translate(-50%, 0); /*左边50%，再平移自身的-50%*/
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border-radius: 10px;
  }

  .zhezhao {
    .wenzi {
      width: 400px;
      height: 116px;
      position: absolute;
      left: 50%;
      transform: translate(-50%, 0);
      top: 80px;
      text-align: center;
      > span {
        font-size: 28px;
        color: #ffc731;
        text-align: center;
      }
    }
    .zzc1_content {
      width: 490px;
      height: 604px;
      box-sizing: border-box;
      padding: 30px;
      background: linear-gradient(#f38571, #f1543e);
      .content {
        width: 100%;
        height: 100%;
        background-color: #fff;
        box-sizing: border-box;
        padding: 38px 30px;
        border-radius: 8px;
        .content-img {
          float: left;
          width: 80px;
          height: 80px;
          margin-right: 20px;
          border-radius: 50%;
        }
        p:nth-child(2) {
          width: 230px;
          float: left;
          font-size: 28px;
          color: #454343;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        p:nth-child(3) {
          margin-top: 6px;
          width: 232px;
          float: left;
          font-size: 20px;
          color: #a1a1a1;
        }
        p:last-child {
          width: 100%;
          font-size: 22px;
          color: #fe3519;
          text-align: center;
        }
        .tupian {
          width: 307px !important;
          height: 307px !important;
          margin: 0 auto 0 !important;
          margin-left: 30px !important;
          border: none;
          /*>img{*/
          /*width: 100%;*/
          /*height: 100%;*/
          /*border: none;*/
          /*}*/
        }
        #canvas {
          width: 307px !important;
          height: 307px !important;
          margin: 0 auto 0 !important;
          margin-left: 30px !important;
          border: none;
        }
      }
    }
  }

  .zhezhao .zzc2_content {
    width: 426px;
    height: 564px;
    top: 295px;
    right: 95px;
  }

  .zhezhao .zzc2_content .zzc2_top {
    width: 100%;
    height: 102px;
    background: #f3f6fa;
    text-align: center;
    line-height: 102px;
    font-size: 32px;
    color: #454343;
  }

  .zhezhao .zzc2_content .zzc2_top img {
    width: 51px;
    height: 51px;
    margin-right: 16px;
    vertical-align: middle;
  }

  .zhezhao .zzc2_content .zzc2_sec {
    width: 100%;
    text-align: center;
    padding-top: 38px;
    color: #a1a1a1;
    font-size: 24px;
  }

  .zhezhao .zzc2_content .zzc2_sec .zzc2_btn1 {
    width: 300px;
    height: 74px;
    background: url("../assets/images/btn1@1x.png") no-repeat;
    background-size: 100%;
    border: none;
    outline: none;
    color: #ffffff;
    font-size: 28px;
    margin: 42px 0 38px;
  }

  .zhezhao .zzc2_content .zzc2_sec div {
    width: 350px;
    height: 35px;
    text-align: center;
    position: relative;
    margin-bottom: 30px;
  }

  .zhezhao .zzc2_content .zzc2_sec div img {
    width: 350px;
    height: 1px;
    vertical-align: middle;
    margin-left: 40px;
  }

  .zhezhao .zzc2_content .zzc2_sec div span {
    font-size: 20px;
    color: #fe3519;
    position: absolute;
    top: 0;
  }

  .zhezhao .zzc2_content .zzc2_sec .zzc2_btn2 {
    width: 295px;
    height: 65px;
    background: url("../assets/images/btn_2@1x.png") no-repeat;
    background-size: 100%;
    color: #fe3519;
    border: none;
    outline: none;
    margin: 40px 0 35px;
  }

</style>
<style lang="scss">

  /*a:hover, a:visited, a:link, a:active {*/
  /*text-decoration: none;*/
  /*outline: none;*/
  /*-webkit-tap-highlight-color: rgba(0, 0, 0, 0);*/
  /*}*/

  /*a.a {*/
  /*color: #3b3b43;*/
  /*}*/
  .shopNow .mint-tab-item-label {
    color: #fe3f22;
  }

  .homeTop {
    box-sizing: border-box;
    min-height: 176px;
    background: url("../assets/images/shops/bg@1x.png") no-repeat;
    /*background-color: orange;*/
    padding: 42px 30px 46px 32px;
    background-size: 100%; /*让图片自适应大小*/
  }

  .homeTop .homt-content {
    height: 88px;
  }

  .homeTop .left {
    width: 390px;
    height: 88px;
    display: inline-block;
  }

  .homeTop .left img {
    display: inline-block;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    margin-right: 20px;
    float: left;
  }

  .homeTop .left .right {
    /*display: inline-block;*/
    float: left;
    width: 270px;
    height: 88px;
  }

  .homeTop .left .right .shopName {
    display: block;
    width: 270px;
    font-size: 28px;
    color: #fff;
    height: 34px;
    margin-top: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .homeTop .left .right span {
    display: block;
    margin-top: 12px;
    font-size: 20px;
    color: #eebdbd;
  }

  .homeTop .right {
    float: right;
    width: 158px;
  }

  .homeTop .share {
    float: left;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: yellow;
    margin-top: 8px;
    background: url("../assets/images/shops/ico_fenxiang@1x.png") no-repeat;
    background-size: cover;
  }

  .homeTop .share-one {
    margin-right: 22px;
    background: url("../assets/images/shops/ico_shezhi@1x.png") no-repeat;
    background-size: cover;
  }

  /*店铺所有分类*/
  .allSort {
    background: #F4F4F4;
  }

  /*分类导航*/
  .nav {
    /*margin-top: 80px;*/
    background: #ffffff;
    width: 100%;
    height: 70px;
    line-height: 70px;
  }

  .nav ul {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
    list-style: none;
    border-bottom: 2px solid #f6f6f6;
  }

  .nav li {
    position: relative;
    font-size: 24px;
    color: #3b3b43;

  }

  /*.nav li .iconpd{*/
  /*box-sizing: border-box;*/
  /*padding-bottom: 24px;*/
  /*position: relative;*/
  /*}*/
  .nav i {
    position: absolute;
    width: 22px;
    height: 12px;
    background: url("../assets/images/shops/lzico@1x.png") no-repeat;
    background-size: 100%;
    /*padding-bottom: 23px;*/
    /*box-sizing: border-box;*/
  }

  .nav .up {
    background-position: 0px 0px;
    top: 18px;
    left: 62px;
  }

  .nav .down {
    background-position: 0px -18px;
    position: absolute;
    top: 36px;
    left: 62px;
  }

  /*所有商品*/
  .allGoods {
    /*width: 100%;*/
    /*height: 100%;*/
    margin-top: 3px;
  }

  .allGoods .goodsNone {
    color: #D3D3D3;
    text-align: center;
    padding-bottom: 20px;
  }

  .highlight {
    opacity: 0;
  }

  .operation_order {
    width: 148px;
    height: 100px;
    background: url(../assets/images/bg@1x.png);
    position: relative;
    top: -10px;
    left: -60px;
    text-align: center;
    background-size: cover;
  }

  .operation_order p {
    width: 148px;
    height: 30px;
    color: #a1a1a1;
    font-size: 25px;
  }

  .cancel {
    position: relative;
    top: 26px;
    height: 30px;
  }

  .delete {
    position: relative;
    top: 44px;
    height: 30px;
  }
</style>
